<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小鹿线-师资力量</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/Normalize.css">
    <link rel="stylesheet" href="./css/iconfont.css">
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/teacher.css">

</head>

<body>
    <div class="container">
        <header>
            <i class="iconfont icon-arrow_left_fat "></i>
            <div class="h-title">
                师资力量
            </div>
        </header>

        <section>
            <ul>


            </ul>
        </section>
    </div>
    <script src="./js/zepto.min.js"></script>
    <script src="./js/touch.js"></script>
    <script src="./js/swiper-bundle.min.js"></script>
    <script src="./js/flexible.js"></script>
    <script src="./js/lazyload.min.js"></script>
    <script>
        $(function () {
            var result = '';
            // 跳转上一页
            $('.icon-arrow_left_fat').click(function () {
                window.history.go(-1);

            })

            // 请求数据
            $.ajax({
                url: `http://39.101.217.150:8075/teachers/list`,
                data: {
                    page: 1,
                    size: 10,

                },
                success: function (data) {
                    var records = data.data.records;
                    $.each(records, function (index, item) {
                        result += `
                        <li data-title='${item.name}'>
                            <img src="${item.imgurl}" alt="老师展示">
                            <h3>${item.name}</h3>
                            <p class='text-overflow'>${item.experience}</p>
                        </li>
                        <li  data-title='${item.name}'>
                            <img src="${item.imgurl}" alt="老师展示">
                            <h3>${item.name}</h3>
                            <p class='text-overflow'>${item.experience}</p>
                        </li>
                        `
                    })
                    $('section ul').html(result);
                }
            })
            // 点击跳转到详情页面
            $('ul').on('tap', 'li', function () {
                var title = encodeURI($(this).attr('data-title'));
                window.location.href = `./teacherDetail.html#${title}`
            })
        })
    </script>
</body>

</html>